<!-- //#region Template -->
<template>
  <div class="makestep-detail-page">
    <el-page-header @back="router.back()" content="工序详情" class="detail-header" />

    <el-card shadow="never" v-loading="detailLoading">
      <div class="detail-title">基本信息</div>
      <el-descriptions :column="3" border>
        <el-descriptions-item label="工序名称">{{ detail.processname || '-' }}</el-descriptions-item>
        <el-descriptions-item label="工序编号">{{ detail.processcode || '-' }}</el-descriptions-item>
        <el-descriptions-item label="版本">{{ detail.version || '-' }}</el-descriptions-item>
        <el-descriptions-item label="产品名称">{{ detail.goodsname || '-' }}</el-descriptions-item>
        <el-descriptions-item label="产出物">{{ detail.deliverables || '-' }}</el-descriptions-item>
        <el-descriptions-item label="负责人">{{ detail.kahuna || '-' }}</el-descriptions-item>
        <el-descriptions-item label="部门">{{ detail.departmentname || '-' }}</el-descriptions-item>
        <el-descriptions-item label="工序时长">{{ detail.spanTime ? `${detail.spanTime} min` : '-' }}</el-descriptions-item>
        <el-descriptions-item label="设备编号">{{ detail.equipmentId || '-' }}</el-descriptions-item>
        <el-descriptions-item label="启用状态">
          <el-tag :type="detail.isUse ? 'success' : 'info'">{{ detail.isUse ? '启用' : '禁用' }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="工序描述" :span="3">
          {{ detail.processdescription || '暂无描述' }}
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-card shadow="never">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="工序信息" name="info">
          <el-empty v-if="!detail.processname" description="暂无工序信息" />
          <div v-else class="info-content">
            <p>路线编号：{{ detail.processcode }}</p>
            <p>所属产品：{{ detail.goodsname }}</p>
            <p>备注：{{ detail.processdescription || '无' }}</p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="操作记录" name="logs">
          <div class="table-wrapper">
            <el-table v-loading="logLoading" :data="logs" border class="logs-table">
              <el-table-column prop="createtime" label="时间" width="180" align="center">
                <template #default="{ row }">
                  {{ formatTime(row.createtime) }}
                </template>
              </el-table-column>
              <el-table-column prop="createname" label="操作人" width="140" align="center" />
              <el-table-column prop="kind" label="类型" width="120" align="center" />
              <el-table-column prop="message" label="内容" min-width="240" align="center" show-overflow-tooltip />
            </el-table>
          </div>
          <el-empty v-if="!logLoading && logs.length === 0" description="暂无操作记录" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<!-- //#endregion Template -->

<script setup lang="ts">
//#region Imports
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import myaxios from '@/Http/http'
//#endregion

//#region Route
const route = useRoute()
const router = useRouter()
const makestepId = computed(() => route.query.id as string || '')
//#endregion

//#region State
const activeTab = ref('info')
const detail = reactive({
  processname: '',
  processcode: '',
  processdescription: '',
  version: '',
  goodsname: '',
  deliverables: '',
  kahuna: '',
  departmentname: '',
  spanTime: 0,
  equipmentId: 0,
  isUse: false,
})
const logs = ref<Array<Record<string, any>>>([])
const logLoading = ref(false)
const detailLoading = ref(false)
//#endregion

//#region Helpers
const formatTime = (val?: string) => {
  if (!val) return '-'
  return new Date(val).toLocaleString()
}
//#endregion

//#region API
// 获取工序详情
const fetchDetail = async () => {
  if (!makestepId.value) {
    ElMessage.warning('未获取到工序ID')
    return
  }
  detailLoading.value = true
  try {
    const res = await myaxios.get('/api/Makesteps/GetMakestepDetail', {
      params: { Id: makestepId.value },
    })
    if (res.data.code === 200 && res.data.result) {
      Object.assign(detail, res.data.result)
    } else {
      ElMessage.error(res.data.message || '获取详情失败')
    }
  } catch (error) {
    ElMessage.error('获取工序详情失败')
    console.error('获取工序详情失败:', error)
  } finally {
    detailLoading.value = false
  }
}

// 获取操作记录
const fetchLogs = async () => {
  if (!makestepId.value) return
  logLoading.value = true
  try {
    const res = await myaxios.get('/api/Makesteps/GetMakestepLogs', {
      params: { MakestepId: makestepId.value },
    })
    if (res.data.code === 200) {
      logs.value = res.data.result || []
    } else {
      ElMessage.error(res.data.message || '获取日志失败')
    }
  } catch (error) {
    ElMessage.error('获取日志失败')
    console.error('获取日志失败:', error)
  } finally {
    logLoading.value = false
  }
}
//#endregion

//#region Lifecycle
watch(
  () => makestepId.value,
  (val) => {
    if (val) {
      fetchDetail()
      fetchLogs()
    }
  },
  { immediate: true }
)
//#endregion
</script>

<!-- //#region Style -->
<style scoped>
.makestep-detail-page {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-header {
  margin-bottom: 8px;
}

.detail-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.info-content {
  line-height: 2;
  color: #303133;
}

.table-wrapper {
  max-height: 500px;
  overflow-y: auto;
}

.logs-table :deep(.el-table__body-wrapper) {
  max-height: 500px;
  overflow-y: auto;
}

.logs-table :deep(.el-table__cell) {
  text-align: center;
}
</style>
<!-- //#endregion Style -->